<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8"/>
  <title>IconFont Demo</title>
  <link rel="shortcut icon" href="https://gtms04.alicdn.com/tps/i4/TB1_oz6GVXXXXaFXpXXJDFnIXXX-64-64.ico" type="image/x-icon"/>
  <link rel="stylesheet" href="https://g.alicdn.com/thx/cube/1.3.2/cube.min.css">
  <link rel="stylesheet" href="demo.css">
  <link rel="stylesheet" href="iconfont.css">
  <script src="iconfont.js"></script>
  <!-- jQuery -->
  <script src="https://a1.alicdn.com/oss/uploads/2018/12/26/7bfddb60-08e8-11e9-9b04-53e73bb6408b.js"></script>
  <!-- 代码高亮 -->
  <script src="https://a1.alicdn.com/oss/uploads/2018/12/26/a3f714d0-08e6-11e9-8a15-ebf944d7534c.js"></script>
</head>
<body>
  <div class="main">
    <h1 class="logo"><a href="https://www.iconfont.cn/" title="iconfont 首页" target="_blank">&#xe86b;</a></h1>
    <div class="nav-tabs">
      <ul id="tabs" class="dib-box">
        <li class="dib active"><span>Unicode</span></li>
        <li class="dib"><span>Font class</span></li>
        <li class="dib"><span>Symbol</span></li>
      </ul>
      
      <a href="https://www.iconfont.cn/manage/index?manage_type=myprojects&projectId=1498672" target="_blank" class="nav-more">查看项目</a>
      
    </div>
    <div class="tab-container">
      <div class="content unicode" style="display: block;">
          <ul class="icon_lists dib-box">
          
            <li class="dib">
              <span class="icon iconfont">&#xe640;</span>
                <div class="name">待收货</div>
                <div class="code-name">&amp;#xe640;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe603;</span>
                <div class="name">fdoi-arrow-left</div>
                <div class="code-name">&amp;#xe603;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe604;</span>
                <div class="name">fdoi-arrow-right</div>
                <div class="code-name">&amp;#xe604;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe605;</span>
                <div class="name">fdoi-arrow-up</div>
                <div class="code-name">&amp;#xe605;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe606;</span>
                <div class="name">fdoi-arrow-down</div>
                <div class="code-name">&amp;#xe606;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe60e;</span>
                <div class="name">fdoi-close</div>
                <div class="code-name">&amp;#xe60e;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe60f;</span>
                <div class="name">fdoi-menu</div>
                <div class="code-name">&amp;#xe60f;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe610;</span>
                <div class="name">fdoi-play</div>
                <div class="code-name">&amp;#xe610;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe611;</span>
                <div class="name">fdoi-pause</div>
                <div class="code-name">&amp;#xe611;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe615;</span>
                <div class="name">fdoi-volume-high</div>
                <div class="code-name">&amp;#xe615;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe617;</span>
                <div class="name">fdoi-volume-medium</div>
                <div class="code-name">&amp;#xe617;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe618;</span>
                <div class="name">fdoi-volume-low</div>
                <div class="code-name">&amp;#xe618;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe619;</span>
                <div class="name">fdoi-mute-volume-high</div>
                <div class="code-name">&amp;#xe619;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe61a;</span>
                <div class="name">fdoi-mute-volume-medium</div>
                <div class="code-name">&amp;#xe61a;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe61b;</span>
                <div class="name">fdoi-mute-volume-low</div>
                <div class="code-name">&amp;#xe61b;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe61d;</span>
                <div class="name">fdoi-fullscreen-exit</div>
                <div class="code-name">&amp;#xe61d;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe61e;</span>
                <div class="name">fdoi-fullscreen</div>
                <div class="code-name">&amp;#xe61e;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe621;</span>
                <div class="name">fdoi-person</div>
                <div class="code-name">&amp;#xe621;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe622;</span>
                <div class="name">fdoi-build</div>
                <div class="code-name">&amp;#xe622;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe623;</span>
                <div class="name">fdoi-edit</div>
                <div class="code-name">&amp;#xe623;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe627;</span>
                <div class="name">fdoi-add</div>
                <div class="code-name">&amp;#xe627;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe628;</span>
                <div class="name">fdoi-rss</div>
                <div class="code-name">&amp;#xe628;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe629;</span>
                <div class="name">fdoi-circle-arrow-left</div>
                <div class="code-name">&amp;#xe629;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe62a;</span>
                <div class="name">fdoi-circle-arrow-right</div>
                <div class="code-name">&amp;#xe62a;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe62b;</span>
                <div class="name">fdoi-circle-arrow-down</div>
                <div class="code-name">&amp;#xe62b;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe62c;</span>
                <div class="name">fdoi-circle-arrow-up</div>
                <div class="code-name">&amp;#xe62c;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe62d;</span>
                <div class="name">fdoi-circle-play</div>
                <div class="code-name">&amp;#xe62d;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe62e;</span>
                <div class="name">fdoi-circle-pause</div>
                <div class="code-name">&amp;#xe62e;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe62f;</span>
                <div class="name">fdoi-circle-edit</div>
                <div class="code-name">&amp;#xe62f;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe630;</span>
                <div class="name">fdoi-circle-comment</div>
                <div class="code-name">&amp;#xe630;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe631;</span>
                <div class="name">fdoi-search</div>
                <div class="code-name">&amp;#xe631;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe8ab;</span>
                <div class="name">爱心</div>
                <div class="code-name">&amp;#xe8ab;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe8ac;</span>
                <div class="name">编辑</div>
                <div class="code-name">&amp;#xe8ac;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe8ad;</span>
                <div class="name">3D眼镜</div>
                <div class="code-name">&amp;#xe8ad;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe8ae;</span>
                <div class="name">彩蛋</div>
                <div class="code-name">&amp;#xe8ae;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe8af;</span>
                <div class="name">安全</div>
                <div class="code-name">&amp;#xe8af;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe8b0;</span>
                <div class="name">帮助</div>
                <div class="code-name">&amp;#xe8b0;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe8b1;</span>
                <div class="name">不感兴趣</div>
                <div class="code-name">&amp;#xe8b1;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe8b2;</span>
                <div class="name">播放记录</div>
                <div class="code-name">&amp;#xe8b2;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe8b3;</span>
                <div class="name">创作</div>
                <div class="code-name">&amp;#xe8b3;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe8b4;</span>
                <div class="name">成功</div>
                <div class="code-name">&amp;#xe8b4;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe8b5;</span>
                <div class="name">测试</div>
                <div class="code-name">&amp;#xe8b5;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe8b6;</span>
                <div class="name">电话</div>
                <div class="code-name">&amp;#xe8b6;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe8b7;</span>
                <div class="name">点赞</div>
                <div class="code-name">&amp;#xe8b7;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe8b8;</span>
                <div class="name">定位</div>
                <div class="code-name">&amp;#xe8b8;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe8b9;</span>
                <div class="name">电筒_关</div>
                <div class="code-name">&amp;#xe8b9;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe8ba;</span>
                <div class="name">电影</div>
                <div class="code-name">&amp;#xe8ba;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe8bb;</span>
                <div class="name">地图</div>
                <div class="code-name">&amp;#xe8bb;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe8bc;</span>
                <div class="name">电筒_开</div>
                <div class="code-name">&amp;#xe8bc;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe8bd;</span>
                <div class="name">电影票</div>
                <div class="code-name">&amp;#xe8bd;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe8be;</span>
                <div class="name">订单</div>
                <div class="code-name">&amp;#xe8be;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe8bf;</span>
                <div class="name">更多</div>
                <div class="code-name">&amp;#xe8bf;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe8c0;</span>
                <div class="name">翻倍</div>
                <div class="code-name">&amp;#xe8c0;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe8c1;</span>
                <div class="name">发现</div>
                <div class="code-name">&amp;#xe8c1;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe8c2;</span>
                <div class="name">儿童票</div>
                <div class="code-name">&amp;#xe8c2;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe8c3;</span>
                <div class="name">公益</div>
                <div class="code-name">&amp;#xe8c3;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe8c4;</span>
                <div class="name">红包</div>
                <div class="code-name">&amp;#xe8c4;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe8c5;</span>
                <div class="name">复制</div>
                <div class="code-name">&amp;#xe8c5;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe8c6;</span>
                <div class="name">分享</div>
                <div class="code-name">&amp;#xe8c6;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe8c7;</span>
                <div class="name">话题符号</div>
                <div class="code-name">&amp;#xe8c7;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe8c8;</span>
                <div class="name">会员</div>
                <div class="code-name">&amp;#xe8c8;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe8c9;</span>
                <div class="name">阿里鱼</div>
                <div class="code-name">&amp;#xe8c9;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe8ca;</span>
                <div class="name">机具</div>
                <div class="code-name">&amp;#xe8ca;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe8cb;</span>
                <div class="name">减少</div>
                <div class="code-name">&amp;#xe8cb;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe8cc;</span>
                <div class="name">卡包</div>
                <div class="code-name">&amp;#xe8cc;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe8cd;</span>
                <div class="name">话题</div>
                <div class="code-name">&amp;#xe8cd;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe8ce;</span>
                <div class="name">关注</div>
                <div class="code-name">&amp;#xe8ce;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe8cf;</span>
                <div class="name">买一赠一</div>
                <div class="code-name">&amp;#xe8cf;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe8d0;</span>
                <div class="name">密码</div>
                <div class="code-name">&amp;#xe8d0;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe8d1;</span>
                <div class="name">男</div>
                <div class="code-name">&amp;#xe8d1;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe8d2;</span>
                <div class="name">女</div>
                <div class="code-name">&amp;#xe8d2;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe8d3;</span>
                <div class="name">礼盒</div>
                <div class="code-name">&amp;#xe8d3;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe8d4;</span>
                <div class="name">排行榜</div>
                <div class="code-name">&amp;#xe8d4;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe8d5;</span>
                <div class="name">礼品卡</div>
                <div class="code-name">&amp;#xe8d5;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe8d6;</span>
                <div class="name">朋友圈</div>
                <div class="code-name">&amp;#xe8d6;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe8d7;</span>
                <div class="name">明星活动</div>
                <div class="code-name">&amp;#xe8d7;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe8d8;</span>
                <div class="name">取票</div>
                <div class="code-name">&amp;#xe8d8;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe8d9;</span>
                <div class="name">扫一扫</div>
                <div class="code-name">&amp;#xe8d9;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe8da;</span>
                <div class="name">日历</div>
                <div class="code-name">&amp;#xe8da;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe8db;</span>
                <div class="name">评论</div>
                <div class="code-name">&amp;#xe8db;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe8dc;</span>
                <div class="name">轻会员</div>
                <div class="code-name">&amp;#xe8dc;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe8dd;</span>
                <div class="name">日签</div>
                <div class="code-name">&amp;#xe8dd;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe8de;</span>
                <div class="name">闪电</div>
                <div class="code-name">&amp;#xe8de;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe8df;</span>
                <div class="name">筛选</div>
                <div class="code-name">&amp;#xe8df;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe8e0;</span>
                <div class="name">商圈</div>
                <div class="code-name">&amp;#xe8e0;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe8e1;</span>
                <div class="name">删除</div>
                <div class="code-name">&amp;#xe8e1;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe8e2;</span>
                <div class="name">设置</div>
                <div class="code-name">&amp;#xe8e2;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe8e3;</span>
                <div class="name">上传</div>
                <div class="code-name">&amp;#xe8e3;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe8e4;</span>
                <div class="name">社区</div>
                <div class="code-name">&amp;#xe8e4;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe8e5;</span>
                <div class="name">声音关闭</div>
                <div class="code-name">&amp;#xe8e5;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe8e6;</span>
                <div class="name">失败</div>
                <div class="code-name">&amp;#xe8e6;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe8e7;</span>
                <div class="name">时间</div>
                <div class="code-name">&amp;#xe8e7;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe8e8;</span>
                <div class="name">声音</div>
                <div class="code-name">&amp;#xe8e8;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe8e9;</span>
                <div class="name">收藏</div>
                <div class="code-name">&amp;#xe8e9;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe8ea;</span>
                <div class="name">手机</div>
                <div class="code-name">&amp;#xe8ea;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe8eb;</span>
                <div class="name">首页</div>
                <div class="code-name">&amp;#xe8eb;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe8ec;</span>
                <div class="name">数据</div>
                <div class="code-name">&amp;#xe8ec;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe8ed;</span>
                <div class="name">刷新</div>
                <div class="code-name">&amp;#xe8ed;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe8ee;</span>
                <div class="name">搜索</div>
                <div class="code-name">&amp;#xe8ee;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe8ef;</span>
                <div class="name">叹号</div>
                <div class="code-name">&amp;#xe8ef;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe8f0;</span>
                <div class="name">讨论区</div>
                <div class="code-name">&amp;#xe8f0;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe8f1;</span>
                <div class="name">添加优惠券</div>
                <div class="code-name">&amp;#xe8f1;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe8f2;</span>
                <div class="name">提示</div>
                <div class="code-name">&amp;#xe8f2;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe8f3;</span>
                <div class="name">图片</div>
                <div class="code-name">&amp;#xe8f3;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe8f4;</span>
                <div class="name">退票</div>
                <div class="code-name">&amp;#xe8f4;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe8f5;</span>
                <div class="name">未选中</div>
                <div class="code-name">&amp;#xe8f5;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe8f6;</span>
                <div class="name">微博</div>
                <div class="code-name">&amp;#xe8f6;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe8f7;</span>
                <div class="name">问卷</div>
                <div class="code-name">&amp;#xe8f7;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe8f8;</span>
                <div class="name">我的</div>
                <div class="code-name">&amp;#xe8f8;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe8f9;</span>
                <div class="name">微信</div>
                <div class="code-name">&amp;#xe8f9;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe8fa;</span>
                <div class="name">我的关注</div>
                <div class="code-name">&amp;#xe8fa;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe8fb;</span>
                <div class="name">虾米</div>
                <div class="code-name">&amp;#xe8fb;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe8fc;</span>
                <div class="name">想看</div>
                <div class="code-name">&amp;#xe8fc;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe8fd;</span>
                <div class="name">相机</div>
                <div class="code-name">&amp;#xe8fd;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe8fe;</span>
                <div class="name">消息</div>
                <div class="code-name">&amp;#xe8fe;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe8ff;</span>
                <div class="name">下载</div>
                <div class="code-name">&amp;#xe8ff;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe900;</span>
                <div class="name">小聚场</div>
                <div class="code-name">&amp;#xe900;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe901;</span>
                <div class="name">小食</div>
                <div class="code-name">&amp;#xe901;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe902;</span>
                <div class="name">消息中心</div>
                <div class="code-name">&amp;#xe902;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe903;</span>
                <div class="name">银行卡</div>
                <div class="code-name">&amp;#xe903;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe904;</span>
                <div class="name">眼睛</div>
                <div class="code-name">&amp;#xe904;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe905;</span>
                <div class="name">影城卡</div>
                <div class="code-name">&amp;#xe905;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe906;</span>
                <div class="name">已想看</div>
                <div class="code-name">&amp;#xe906;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe907;</span>
                <div class="name">影评模板</div>
                <div class="code-name">&amp;#xe907;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe908;</span>
                <div class="name">演出</div>
                <div class="code-name">&amp;#xe908;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe909;</span>
                <div class="name">小蜜</div>
                <div class="code-name">&amp;#xe909;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe90a;</span>
                <div class="name">影院</div>
                <div class="code-name">&amp;#xe90a;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe90b;</span>
                <div class="name">增加</div>
                <div class="code-name">&amp;#xe90b;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe90c;</span>
                <div class="name">语音</div>
                <div class="code-name">&amp;#xe90c;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe90d;</span>
                <div class="name">优惠券</div>
                <div class="code-name">&amp;#xe90d;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe90e;</span>
                <div class="name">WIFI</div>
                <div class="code-name">&amp;#xe90e;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe90f;</span>
                <div class="name">直播</div>
                <div class="code-name">&amp;#xe90f;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe910;</span>
                <div class="name">优酷会员</div>
                <div class="code-name">&amp;#xe910;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe911;</span>
                <div class="name">娱乐宝</div>
                <div class="code-name">&amp;#xe911;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe912;</span>
                <div class="name">指纹</div>
                <div class="code-name">&amp;#xe912;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe913;</span>
                <div class="name">爱心</div>
                <div class="code-name">&amp;#xe913;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe914;</span>
                <div class="name">成功</div>
                <div class="code-name">&amp;#xe914;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe915;</span>
                <div class="name">点赞</div>
                <div class="code-name">&amp;#xe915;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe916;</span>
                <div class="name">电话</div>
                <div class="code-name">&amp;#xe916;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe917;</span>
                <div class="name">帮助</div>
                <div class="code-name">&amp;#xe917;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe918;</span>
                <div class="name">电影票</div>
                <div class="code-name">&amp;#xe918;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe919;</span>
                <div class="name">发现</div>
                <div class="code-name">&amp;#xe919;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe91a;</span>
                <div class="name">定位</div>
                <div class="code-name">&amp;#xe91a;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe91b;</span>
                <div class="name">公告</div>
                <div class="code-name">&amp;#xe91b;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe91c;</span>
                <div class="name">话题</div>
                <div class="code-name">&amp;#xe91c;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe91d;</span>
                <div class="name">减少</div>
                <div class="code-name">&amp;#xe91d;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe91e;</span>
                <div class="name">会员</div>
                <div class="code-name">&amp;#xe91e;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe91f;</span>
                <div class="name">评论</div>
                <div class="code-name">&amp;#xe91f;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe920;</span>
                <div class="name">社区</div>
                <div class="code-name">&amp;#xe920;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe921;</span>
                <div class="name">失败</div>
                <div class="code-name">&amp;#xe921;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe922;</span>
                <div class="name">时间</div>
                <div class="code-name">&amp;#xe922;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe923;</span>
                <div class="name">闪电</div>
                <div class="code-name">&amp;#xe923;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe924;</span>
                <div class="name">我的</div>
                <div class="code-name">&amp;#xe924;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe925;</span>
                <div class="name">首页</div>
                <div class="code-name">&amp;#xe925;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe926;</span>
                <div class="name">手机</div>
                <div class="code-name">&amp;#xe926;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe927;</span>
                <div class="name">叹号</div>
                <div class="code-name">&amp;#xe927;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe928;</span>
                <div class="name">收藏</div>
                <div class="code-name">&amp;#xe928;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe929;</span>
                <div class="name">数据</div>
                <div class="code-name">&amp;#xe929;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe92a;</span>
                <div class="name">问答</div>
                <div class="code-name">&amp;#xe92a;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe92b;</span>
                <div class="name">眼睛</div>
                <div class="code-name">&amp;#xe92b;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe92c;</span>
                <div class="name">影城卡</div>
                <div class="code-name">&amp;#xe92c;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe92d;</span>
                <div class="name">相机</div>
                <div class="code-name">&amp;#xe92d;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe92e;</span>
                <div class="name">影院</div>
                <div class="code-name">&amp;#xe92e;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe92f;</span>
                <div class="name">银行优惠</div>
                <div class="code-name">&amp;#xe92f;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe930;</span>
                <div class="name">小食</div>
                <div class="code-name">&amp;#xe930;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe931;</span>
                <div class="name">演出</div>
                <div class="code-name">&amp;#xe931;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe932;</span>
                <div class="name">增加</div>
                <div class="code-name">&amp;#xe932;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe933;</span>
                <div class="name">电影</div>
                <div class="code-name">&amp;#xe933;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe934;</span>
                <div class="name">优惠券</div>
                <div class="code-name">&amp;#xe934;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe935;</span>
                <div class="name">热门</div>
                <div class="code-name">&amp;#xe935;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe936;</span>
                <div class="name">创作</div>
                <div class="code-name">&amp;#xe936;</div>
              </li>
          
          </ul>
          <div class="article markdown">
          <h2 id="unicode-">Unicode 引用</h2>
          <hr>

          <p>Unicode 是字体在网页端最原始的应用方式，特点是：</p>
          <ul>
            <li>兼容性最好，支持 IE6+，及所有现代浏览器。</li>
            <li>支持按字体的方式去动态调整图标大小，颜色等等。</li>
            <li>但是因为是字体，所以不支持多色。只能使用平台里单色的图标，就算项目里有多色图标也会自动去色。</li>
          </ul>
          <blockquote>
            <p>注意：新版 iconfont 支持多色图标，这些多色图标在 Unicode 模式下将不能使用，如果有需求建议使用symbol 的引用方式</p>
          </blockquote>
          <p>Unicode 使用步骤如下：</p>
          <h3 id="-font-face">第一步：拷贝项目下面生成的 <code>@font-face</code></h3>
<pre><code class="language-css"
>@font-face {
  font-family: 'iconfont';
  src: url('iconfont.eot');
  src: url('iconfont.eot?#iefix') format('embedded-opentype'),
      url('iconfont.woff2') format('woff2'),
      url('iconfont.woff') format('woff'),
      url('iconfont.ttf') format('truetype'),
      url('iconfont.svg#iconfont') format('svg');
}
</code></pre>
          <h3 id="-iconfont-">第二步：定义使用 iconfont 的样式</h3>
<pre><code class="language-css"
>.iconfont {
  font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
</code></pre>
          <h3 id="-">第三步：挑选相应图标并获取字体编码，应用于页面</h3>
<pre>
<code class="language-html"
>&lt;span class="iconfont"&gt;&amp;#x33;&lt;/span&gt;
</code></pre>
          <blockquote>
            <p>"iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。</p>
          </blockquote>
          </div>
      </div>
      <div class="content font-class">
        <ul class="icon_lists dib-box">
          
          <li class="dib">
            <span class="icon iconfont icondaishouhuo"></span>
            <div class="name">
              待收货
            </div>
            <div class="code-name">.icondaishouhuo
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconfdoi-arrow-left"></span>
            <div class="name">
              fdoi-arrow-left
            </div>
            <div class="code-name">.iconfdoi-arrow-left
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconfdoi-arrow-right"></span>
            <div class="name">
              fdoi-arrow-right
            </div>
            <div class="code-name">.iconfdoi-arrow-right
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconfdoi-arrow-up"></span>
            <div class="name">
              fdoi-arrow-up
            </div>
            <div class="code-name">.iconfdoi-arrow-up
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconfdoi-arrow-down"></span>
            <div class="name">
              fdoi-arrow-down
            </div>
            <div class="code-name">.iconfdoi-arrow-down
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconfdoi-close"></span>
            <div class="name">
              fdoi-close
            </div>
            <div class="code-name">.iconfdoi-close
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconfdoi-menu"></span>
            <div class="name">
              fdoi-menu
            </div>
            <div class="code-name">.iconfdoi-menu
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconfdoi-play"></span>
            <div class="name">
              fdoi-play
            </div>
            <div class="code-name">.iconfdoi-play
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconfdoi-pause"></span>
            <div class="name">
              fdoi-pause
            </div>
            <div class="code-name">.iconfdoi-pause
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconfdoi-volume-high"></span>
            <div class="name">
              fdoi-volume-high
            </div>
            <div class="code-name">.iconfdoi-volume-high
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconfdoi-volume-medium"></span>
            <div class="name">
              fdoi-volume-medium
            </div>
            <div class="code-name">.iconfdoi-volume-medium
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconfdoi-volume-low"></span>
            <div class="name">
              fdoi-volume-low
            </div>
            <div class="code-name">.iconfdoi-volume-low
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconfdoi-mute-volume-high"></span>
            <div class="name">
              fdoi-mute-volume-high
            </div>
            <div class="code-name">.iconfdoi-mute-volume-high
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconfdoi-mute-volume-medium"></span>
            <div class="name">
              fdoi-mute-volume-medium
            </div>
            <div class="code-name">.iconfdoi-mute-volume-medium
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconfdoi-mute-volume-low"></span>
            <div class="name">
              fdoi-mute-volume-low
            </div>
            <div class="code-name">.iconfdoi-mute-volume-low
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconfdoi-fullscreen-exit"></span>
            <div class="name">
              fdoi-fullscreen-exit
            </div>
            <div class="code-name">.iconfdoi-fullscreen-exit
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconfdoi-fullscreen"></span>
            <div class="name">
              fdoi-fullscreen
            </div>
            <div class="code-name">.iconfdoi-fullscreen
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconfdoi-person"></span>
            <div class="name">
              fdoi-person
            </div>
            <div class="code-name">.iconfdoi-person
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconfdoi-build"></span>
            <div class="name">
              fdoi-build
            </div>
            <div class="code-name">.iconfdoi-build
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconfdoi-edit"></span>
            <div class="name">
              fdoi-edit
            </div>
            <div class="code-name">.iconfdoi-edit
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconfdoi-add"></span>
            <div class="name">
              fdoi-add
            </div>
            <div class="code-name">.iconfdoi-add
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconfdoi-rss"></span>
            <div class="name">
              fdoi-rss
            </div>
            <div class="code-name">.iconfdoi-rss
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconfdoi-circle-arrow-left"></span>
            <div class="name">
              fdoi-circle-arrow-left
            </div>
            <div class="code-name">.iconfdoi-circle-arrow-left
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconfdoi-circle-arrow-right"></span>
            <div class="name">
              fdoi-circle-arrow-right
            </div>
            <div class="code-name">.iconfdoi-circle-arrow-right
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconfdoi-circle-arrow-down"></span>
            <div class="name">
              fdoi-circle-arrow-down
            </div>
            <div class="code-name">.iconfdoi-circle-arrow-down
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconfdoi-circle-arrow-up"></span>
            <div class="name">
              fdoi-circle-arrow-up
            </div>
            <div class="code-name">.iconfdoi-circle-arrow-up
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconfdoi-circle-play"></span>
            <div class="name">
              fdoi-circle-play
            </div>
            <div class="code-name">.iconfdoi-circle-play
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconfdoi-circle-pause"></span>
            <div class="name">
              fdoi-circle-pause
            </div>
            <div class="code-name">.iconfdoi-circle-pause
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconfdoi-circle-edit"></span>
            <div class="name">
              fdoi-circle-edit
            </div>
            <div class="code-name">.iconfdoi-circle-edit
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconfdoi-circle-comment"></span>
            <div class="name">
              fdoi-circle-comment
            </div>
            <div class="code-name">.iconfdoi-circle-comment
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconfdoi-search"></span>
            <div class="name">
              fdoi-search
            </div>
            <div class="code-name">.iconfdoi-search
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconaixin"></span>
            <div class="name">
              爱心
            </div>
            <div class="code-name">.iconaixin
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconbianji"></span>
            <div class="name">
              编辑
            </div>
            <div class="code-name">.iconbianji
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconDyanjing"></span>
            <div class="name">
              3D眼镜
            </div>
            <div class="code-name">.iconDyanjing
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconcaidan"></span>
            <div class="name">
              彩蛋
            </div>
            <div class="code-name">.iconcaidan
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconanquan"></span>
            <div class="name">
              安全
            </div>
            <div class="code-name">.iconanquan
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconbangzhu"></span>
            <div class="name">
              帮助
            </div>
            <div class="code-name">.iconbangzhu
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconbuganxingqu"></span>
            <div class="name">
              不感兴趣
            </div>
            <div class="code-name">.iconbuganxingqu
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconbofangjilu"></span>
            <div class="name">
              播放记录
            </div>
            <div class="code-name">.iconbofangjilu
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconchuangzuo"></span>
            <div class="name">
              创作
            </div>
            <div class="code-name">.iconchuangzuo
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconchenggong"></span>
            <div class="name">
              成功
            </div>
            <div class="code-name">.iconchenggong
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconceshi"></span>
            <div class="name">
              测试
            </div>
            <div class="code-name">.iconceshi
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icondianhua"></span>
            <div class="name">
              电话
            </div>
            <div class="code-name">.icondianhua
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icondianzan"></span>
            <div class="name">
              点赞
            </div>
            <div class="code-name">.icondianzan
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icondingwei"></span>
            <div class="name">
              定位
            </div>
            <div class="code-name">.icondingwei
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icondiantong_guan"></span>
            <div class="name">
              电筒_关
            </div>
            <div class="code-name">.icondiantong_guan
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icondianying"></span>
            <div class="name">
              电影
            </div>
            <div class="code-name">.icondianying
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconditu"></span>
            <div class="name">
              地图
            </div>
            <div class="code-name">.iconditu
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icondiantong_kai"></span>
            <div class="name">
              电筒_开
            </div>
            <div class="code-name">.icondiantong_kai
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icondianyingpiao"></span>
            <div class="name">
              电影票
            </div>
            <div class="code-name">.icondianyingpiao
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icondingdan"></span>
            <div class="name">
              订单
            </div>
            <div class="code-name">.icondingdan
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icongengduo"></span>
            <div class="name">
              更多
            </div>
            <div class="code-name">.icongengduo
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconfanbei"></span>
            <div class="name">
              翻倍
            </div>
            <div class="code-name">.iconfanbei
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconfaxian"></span>
            <div class="name">
              发现
            </div>
            <div class="code-name">.iconfaxian
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconertongpiao"></span>
            <div class="name">
              儿童票
            </div>
            <div class="code-name">.iconertongpiao
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icongongyi"></span>
            <div class="name">
              公益
            </div>
            <div class="code-name">.icongongyi
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconhongbao"></span>
            <div class="name">
              红包
            </div>
            <div class="code-name">.iconhongbao
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconfuzhi"></span>
            <div class="name">
              复制
            </div>
            <div class="code-name">.iconfuzhi
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconfenxiang"></span>
            <div class="name">
              分享
            </div>
            <div class="code-name">.iconfenxiang
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconhuatifuhao"></span>
            <div class="name">
              话题符号
            </div>
            <div class="code-name">.iconhuatifuhao
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconhuiyuan"></span>
            <div class="name">
              会员
            </div>
            <div class="code-name">.iconhuiyuan
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconaliyu"></span>
            <div class="name">
              阿里鱼
            </div>
            <div class="code-name">.iconaliyu
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconjiju"></span>
            <div class="name">
              机具
            </div>
            <div class="code-name">.iconjiju
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconjianshao"></span>
            <div class="name">
              减少
            </div>
            <div class="code-name">.iconjianshao
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconkabao"></span>
            <div class="name">
              卡包
            </div>
            <div class="code-name">.iconkabao
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconhuati"></span>
            <div class="name">
              话题
            </div>
            <div class="code-name">.iconhuati
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconguanzhu"></span>
            <div class="name">
              关注
            </div>
            <div class="code-name">.iconguanzhu
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconmaiyizengyi"></span>
            <div class="name">
              买一赠一
            </div>
            <div class="code-name">.iconmaiyizengyi
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconmima"></span>
            <div class="name">
              密码
            </div>
            <div class="code-name">.iconmima
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconnan"></span>
            <div class="name">
              男
            </div>
            <div class="code-name">.iconnan
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconnv"></span>
            <div class="name">
              女
            </div>
            <div class="code-name">.iconnv
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconlihe"></span>
            <div class="name">
              礼盒
            </div>
            <div class="code-name">.iconlihe
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconpaihangbang"></span>
            <div class="name">
              排行榜
            </div>
            <div class="code-name">.iconpaihangbang
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconlipinka"></span>
            <div class="name">
              礼品卡
            </div>
            <div class="code-name">.iconlipinka
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconpengyouquan"></span>
            <div class="name">
              朋友圈
            </div>
            <div class="code-name">.iconpengyouquan
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconmingxinghuodong"></span>
            <div class="name">
              明星活动
            </div>
            <div class="code-name">.iconmingxinghuodong
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconqupiao"></span>
            <div class="name">
              取票
            </div>
            <div class="code-name">.iconqupiao
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconsaoyisao"></span>
            <div class="name">
              扫一扫
            </div>
            <div class="code-name">.iconsaoyisao
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconrili"></span>
            <div class="name">
              日历
            </div>
            <div class="code-name">.iconrili
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconpinglun"></span>
            <div class="name">
              评论
            </div>
            <div class="code-name">.iconpinglun
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconqinghuiyuan"></span>
            <div class="name">
              轻会员
            </div>
            <div class="code-name">.iconqinghuiyuan
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconriqian"></span>
            <div class="name">
              日签
            </div>
            <div class="code-name">.iconriqian
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconshandian"></span>
            <div class="name">
              闪电
            </div>
            <div class="code-name">.iconshandian
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconshaixuan"></span>
            <div class="name">
              筛选
            </div>
            <div class="code-name">.iconshaixuan
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconshangquan"></span>
            <div class="name">
              商圈
            </div>
            <div class="code-name">.iconshangquan
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconshanchu"></span>
            <div class="name">
              删除
            </div>
            <div class="code-name">.iconshanchu
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconshezhi"></span>
            <div class="name">
              设置
            </div>
            <div class="code-name">.iconshezhi
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconshangchuan"></span>
            <div class="name">
              上传
            </div>
            <div class="code-name">.iconshangchuan
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconshequ"></span>
            <div class="name">
              社区
            </div>
            <div class="code-name">.iconshequ
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconshengyinguanbi"></span>
            <div class="name">
              声音关闭
            </div>
            <div class="code-name">.iconshengyinguanbi
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconshibai"></span>
            <div class="name">
              失败
            </div>
            <div class="code-name">.iconshibai
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconshijian"></span>
            <div class="name">
              时间
            </div>
            <div class="code-name">.iconshijian
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconshengyin"></span>
            <div class="name">
              声音
            </div>
            <div class="code-name">.iconshengyin
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconshoucang"></span>
            <div class="name">
              收藏
            </div>
            <div class="code-name">.iconshoucang
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconshouji"></span>
            <div class="name">
              手机
            </div>
            <div class="code-name">.iconshouji
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconshouye"></span>
            <div class="name">
              首页
            </div>
            <div class="code-name">.iconshouye
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconshuju"></span>
            <div class="name">
              数据
            </div>
            <div class="code-name">.iconshuju
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconshuaxin"></span>
            <div class="name">
              刷新
            </div>
            <div class="code-name">.iconshuaxin
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconsousuo"></span>
            <div class="name">
              搜索
            </div>
            <div class="code-name">.iconsousuo
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icontanhao"></span>
            <div class="name">
              叹号
            </div>
            <div class="code-name">.icontanhao
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icontaolunqu"></span>
            <div class="name">
              讨论区
            </div>
            <div class="code-name">.icontaolunqu
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icontianjiayouhuiquan"></span>
            <div class="name">
              添加优惠券
            </div>
            <div class="code-name">.icontianjiayouhuiquan
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icontishi"></span>
            <div class="name">
              提示
            </div>
            <div class="code-name">.icontishi
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icontupian"></span>
            <div class="name">
              图片
            </div>
            <div class="code-name">.icontupian
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icontuipiao"></span>
            <div class="name">
              退票
            </div>
            <div class="code-name">.icontuipiao
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconweixuanzhong"></span>
            <div class="name">
              未选中
            </div>
            <div class="code-name">.iconweixuanzhong
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconweibo"></span>
            <div class="name">
              微博
            </div>
            <div class="code-name">.iconweibo
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconwenjuan"></span>
            <div class="name">
              问卷
            </div>
            <div class="code-name">.iconwenjuan
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconwode"></span>
            <div class="name">
              我的
            </div>
            <div class="code-name">.iconwode
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconweixin"></span>
            <div class="name">
              微信
            </div>
            <div class="code-name">.iconweixin
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconwodeguanzhu"></span>
            <div class="name">
              我的关注
            </div>
            <div class="code-name">.iconwodeguanzhu
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconxiami"></span>
            <div class="name">
              虾米
            </div>
            <div class="code-name">.iconxiami
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconxiangkan"></span>
            <div class="name">
              想看
            </div>
            <div class="code-name">.iconxiangkan
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconxiangji"></span>
            <div class="name">
              相机
            </div>
            <div class="code-name">.iconxiangji
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconxiaoxi"></span>
            <div class="name">
              消息
            </div>
            <div class="code-name">.iconxiaoxi
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconxiazai"></span>
            <div class="name">
              下载
            </div>
            <div class="code-name">.iconxiazai
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconxiaojuchang"></span>
            <div class="name">
              小聚场
            </div>
            <div class="code-name">.iconxiaojuchang
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconxiaoshi"></span>
            <div class="name">
              小食
            </div>
            <div class="code-name">.iconxiaoshi
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconxiaoxizhongxin"></span>
            <div class="name">
              消息中心
            </div>
            <div class="code-name">.iconxiaoxizhongxin
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconyinhangka"></span>
            <div class="name">
              银行卡
            </div>
            <div class="code-name">.iconyinhangka
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconyanjing"></span>
            <div class="name">
              眼睛
            </div>
            <div class="code-name">.iconyanjing
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconyingchengka"></span>
            <div class="name">
              影城卡
            </div>
            <div class="code-name">.iconyingchengka
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconyixiangkan"></span>
            <div class="name">
              已想看
            </div>
            <div class="code-name">.iconyixiangkan
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconyingpingmoban"></span>
            <div class="name">
              影评模板
            </div>
            <div class="code-name">.iconyingpingmoban
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconyanchu"></span>
            <div class="name">
              演出
            </div>
            <div class="code-name">.iconyanchu
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconxiaomi"></span>
            <div class="name">
              小蜜
            </div>
            <div class="code-name">.iconxiaomi
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconyingyuan"></span>
            <div class="name">
              影院
            </div>
            <div class="code-name">.iconyingyuan
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconzengjia"></span>
            <div class="name">
              增加
            </div>
            <div class="code-name">.iconzengjia
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconyuyin"></span>
            <div class="name">
              语音
            </div>
            <div class="code-name">.iconyuyin
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconyouhuiquan"></span>
            <div class="name">
              优惠券
            </div>
            <div class="code-name">.iconyouhuiquan
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconWIFI"></span>
            <div class="name">
              WIFI
            </div>
            <div class="code-name">.iconWIFI
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconzhibo"></span>
            <div class="name">
              直播
            </div>
            <div class="code-name">.iconzhibo
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconyoukuhuiyuan"></span>
            <div class="name">
              优酷会员
            </div>
            <div class="code-name">.iconyoukuhuiyuan
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconyulebao"></span>
            <div class="name">
              娱乐宝
            </div>
            <div class="code-name">.iconyulebao
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconzhiwen"></span>
            <div class="name">
              指纹
            </div>
            <div class="code-name">.iconzhiwen
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconaixin1"></span>
            <div class="name">
              爱心
            </div>
            <div class="code-name">.iconaixin1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconchenggong1"></span>
            <div class="name">
              成功
            </div>
            <div class="code-name">.iconchenggong1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icondianzan1"></span>
            <div class="name">
              点赞
            </div>
            <div class="code-name">.icondianzan1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icondianhua1"></span>
            <div class="name">
              电话
            </div>
            <div class="code-name">.icondianhua1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconbangzhu1"></span>
            <div class="name">
              帮助
            </div>
            <div class="code-name">.iconbangzhu1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icondianyingpiao1"></span>
            <div class="name">
              电影票
            </div>
            <div class="code-name">.icondianyingpiao1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconfaxian1"></span>
            <div class="name">
              发现
            </div>
            <div class="code-name">.iconfaxian1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icondingwei1"></span>
            <div class="name">
              定位
            </div>
            <div class="code-name">.icondingwei1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icongonggao"></span>
            <div class="name">
              公告
            </div>
            <div class="code-name">.icongonggao
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconhuati1"></span>
            <div class="name">
              话题
            </div>
            <div class="code-name">.iconhuati1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconjianshao1"></span>
            <div class="name">
              减少
            </div>
            <div class="code-name">.iconjianshao1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconhuiyuan1"></span>
            <div class="name">
              会员
            </div>
            <div class="code-name">.iconhuiyuan1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconpinglun1"></span>
            <div class="name">
              评论
            </div>
            <div class="code-name">.iconpinglun1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconshequ1"></span>
            <div class="name">
              社区
            </div>
            <div class="code-name">.iconshequ1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconshibai1"></span>
            <div class="name">
              失败
            </div>
            <div class="code-name">.iconshibai1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconshijian1"></span>
            <div class="name">
              时间
            </div>
            <div class="code-name">.iconshijian1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconshandian1"></span>
            <div class="name">
              闪电
            </div>
            <div class="code-name">.iconshandian1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconwode1"></span>
            <div class="name">
              我的
            </div>
            <div class="code-name">.iconwode1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconshouye1"></span>
            <div class="name">
              首页
            </div>
            <div class="code-name">.iconshouye1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconshouji1"></span>
            <div class="name">
              手机
            </div>
            <div class="code-name">.iconshouji1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icontanhao1"></span>
            <div class="name">
              叹号
            </div>
            <div class="code-name">.icontanhao1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconshoucang1"></span>
            <div class="name">
              收藏
            </div>
            <div class="code-name">.iconshoucang1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconshuju1"></span>
            <div class="name">
              数据
            </div>
            <div class="code-name">.iconshuju1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconwenda"></span>
            <div class="name">
              问答
            </div>
            <div class="code-name">.iconwenda
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconyanjing1"></span>
            <div class="name">
              眼睛
            </div>
            <div class="code-name">.iconyanjing1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconyingchengka1"></span>
            <div class="name">
              影城卡
            </div>
            <div class="code-name">.iconyingchengka1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconxiangji1"></span>
            <div class="name">
              相机
            </div>
            <div class="code-name">.iconxiangji1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconyingyuan1"></span>
            <div class="name">
              影院
            </div>
            <div class="code-name">.iconyingyuan1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconyinhangyouhui"></span>
            <div class="name">
              银行优惠
            </div>
            <div class="code-name">.iconyinhangyouhui
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconxiaoshi1"></span>
            <div class="name">
              小食
            </div>
            <div class="code-name">.iconxiaoshi1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconyanchu1"></span>
            <div class="name">
              演出
            </div>
            <div class="code-name">.iconyanchu1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconzengjia1"></span>
            <div class="name">
              增加
            </div>
            <div class="code-name">.iconzengjia1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icondianying1"></span>
            <div class="name">
              电影
            </div>
            <div class="code-name">.icondianying1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconyouhuiquan1"></span>
            <div class="name">
              优惠券
            </div>
            <div class="code-name">.iconyouhuiquan1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconremen"></span>
            <div class="name">
              热门
            </div>
            <div class="code-name">.iconremen
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconchuangzuo1"></span>
            <div class="name">
              创作
            </div>
            <div class="code-name">.iconchuangzuo1
            </div>
          </li>
          
        </ul>
        <div class="article markdown">
        <h2 id="font-class-">font-class 引用</h2>
        <hr>

        <p>font-class 是 Unicode 使用方式的一种变种，主要是解决 Unicode 书写不直观，语意不明确的问题。</p>
        <p>与 Unicode 使用方式相比，具有如下特点：</p>
        <ul>
          <li>兼容性良好，支持 IE8+，及所有现代浏览器。</li>
          <li>相比于 Unicode 语意明确，书写更直观。可以很容易分辨这个 icon 是什么。</li>
          <li>因为使用 class 来定义图标，所以当要替换图标时，只需要修改 class 里面的 Unicode 引用。</li>
          <li>不过因为本质上还是使用的字体，所以多色图标还是不支持的。</li>
        </ul>
        <p>使用步骤如下：</p>
        <h3 id="-fontclass-">第一步：引入项目下面生成的 fontclass 代码：</h3>
<pre><code class="language-html">&lt;link rel="stylesheet" href="./iconfont.css"&gt;
</code></pre>
        <h3 id="-">第二步：挑选相应图标并获取类名，应用于页面：</h3>
<pre><code class="language-html">&lt;span class="iconfont iconxxx"&gt;&lt;/span&gt;
</code></pre>
        <blockquote>
          <p>"
            iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。</p>
        </blockquote>
      </div>
      </div>
      <div class="content symbol">
          <ul class="icon_lists dib-box">
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icondaishouhuo"></use>
                </svg>
                <div class="name">待收货</div>
                <div class="code-name">#icondaishouhuo</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconfdoi-arrow-left"></use>
                </svg>
                <div class="name">fdoi-arrow-left</div>
                <div class="code-name">#iconfdoi-arrow-left</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconfdoi-arrow-right"></use>
                </svg>
                <div class="name">fdoi-arrow-right</div>
                <div class="code-name">#iconfdoi-arrow-right</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconfdoi-arrow-up"></use>
                </svg>
                <div class="name">fdoi-arrow-up</div>
                <div class="code-name">#iconfdoi-arrow-up</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconfdoi-arrow-down"></use>
                </svg>
                <div class="name">fdoi-arrow-down</div>
                <div class="code-name">#iconfdoi-arrow-down</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconfdoi-close"></use>
                </svg>
                <div class="name">fdoi-close</div>
                <div class="code-name">#iconfdoi-close</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconfdoi-menu"></use>
                </svg>
                <div class="name">fdoi-menu</div>
                <div class="code-name">#iconfdoi-menu</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconfdoi-play"></use>
                </svg>
                <div class="name">fdoi-play</div>
                <div class="code-name">#iconfdoi-play</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconfdoi-pause"></use>
                </svg>
                <div class="name">fdoi-pause</div>
                <div class="code-name">#iconfdoi-pause</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconfdoi-volume-high"></use>
                </svg>
                <div class="name">fdoi-volume-high</div>
                <div class="code-name">#iconfdoi-volume-high</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconfdoi-volume-medium"></use>
                </svg>
                <div class="name">fdoi-volume-medium</div>
                <div class="code-name">#iconfdoi-volume-medium</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconfdoi-volume-low"></use>
                </svg>
                <div class="name">fdoi-volume-low</div>
                <div class="code-name">#iconfdoi-volume-low</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconfdoi-mute-volume-high"></use>
                </svg>
                <div class="name">fdoi-mute-volume-high</div>
                <div class="code-name">#iconfdoi-mute-volume-high</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconfdoi-mute-volume-medium"></use>
                </svg>
                <div class="name">fdoi-mute-volume-medium</div>
                <div class="code-name">#iconfdoi-mute-volume-medium</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconfdoi-mute-volume-low"></use>
                </svg>
                <div class="name">fdoi-mute-volume-low</div>
                <div class="code-name">#iconfdoi-mute-volume-low</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconfdoi-fullscreen-exit"></use>
                </svg>
                <div class="name">fdoi-fullscreen-exit</div>
                <div class="code-name">#iconfdoi-fullscreen-exit</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconfdoi-fullscreen"></use>
                </svg>
                <div class="name">fdoi-fullscreen</div>
                <div class="code-name">#iconfdoi-fullscreen</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconfdoi-person"></use>
                </svg>
                <div class="name">fdoi-person</div>
                <div class="code-name">#iconfdoi-person</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconfdoi-build"></use>
                </svg>
                <div class="name">fdoi-build</div>
                <div class="code-name">#iconfdoi-build</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconfdoi-edit"></use>
                </svg>
                <div class="name">fdoi-edit</div>
                <div class="code-name">#iconfdoi-edit</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconfdoi-add"></use>
                </svg>
                <div class="name">fdoi-add</div>
                <div class="code-name">#iconfdoi-add</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconfdoi-rss"></use>
                </svg>
                <div class="name">fdoi-rss</div>
                <div class="code-name">#iconfdoi-rss</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconfdoi-circle-arrow-left"></use>
                </svg>
                <div class="name">fdoi-circle-arrow-left</div>
                <div class="code-name">#iconfdoi-circle-arrow-left</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconfdoi-circle-arrow-right"></use>
                </svg>
                <div class="name">fdoi-circle-arrow-right</div>
                <div class="code-name">#iconfdoi-circle-arrow-right</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconfdoi-circle-arrow-down"></use>
                </svg>
                <div class="name">fdoi-circle-arrow-down</div>
                <div class="code-name">#iconfdoi-circle-arrow-down</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconfdoi-circle-arrow-up"></use>
                </svg>
                <div class="name">fdoi-circle-arrow-up</div>
                <div class="code-name">#iconfdoi-circle-arrow-up</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconfdoi-circle-play"></use>
                </svg>
                <div class="name">fdoi-circle-play</div>
                <div class="code-name">#iconfdoi-circle-play</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconfdoi-circle-pause"></use>
                </svg>
                <div class="name">fdoi-circle-pause</div>
                <div class="code-name">#iconfdoi-circle-pause</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconfdoi-circle-edit"></use>
                </svg>
                <div class="name">fdoi-circle-edit</div>
                <div class="code-name">#iconfdoi-circle-edit</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconfdoi-circle-comment"></use>
                </svg>
                <div class="name">fdoi-circle-comment</div>
                <div class="code-name">#iconfdoi-circle-comment</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconfdoi-search"></use>
                </svg>
                <div class="name">fdoi-search</div>
                <div class="code-name">#iconfdoi-search</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconaixin"></use>
                </svg>
                <div class="name">爱心</div>
                <div class="code-name">#iconaixin</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconbianji"></use>
                </svg>
                <div class="name">编辑</div>
                <div class="code-name">#iconbianji</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconDyanjing"></use>
                </svg>
                <div class="name">3D眼镜</div>
                <div class="code-name">#iconDyanjing</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconcaidan"></use>
                </svg>
                <div class="name">彩蛋</div>
                <div class="code-name">#iconcaidan</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconanquan"></use>
                </svg>
                <div class="name">安全</div>
                <div class="code-name">#iconanquan</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconbangzhu"></use>
                </svg>
                <div class="name">帮助</div>
                <div class="code-name">#iconbangzhu</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconbuganxingqu"></use>
                </svg>
                <div class="name">不感兴趣</div>
                <div class="code-name">#iconbuganxingqu</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconbofangjilu"></use>
                </svg>
                <div class="name">播放记录</div>
                <div class="code-name">#iconbofangjilu</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconchuangzuo"></use>
                </svg>
                <div class="name">创作</div>
                <div class="code-name">#iconchuangzuo</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconchenggong"></use>
                </svg>
                <div class="name">成功</div>
                <div class="code-name">#iconchenggong</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconceshi"></use>
                </svg>
                <div class="name">测试</div>
                <div class="code-name">#iconceshi</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icondianhua"></use>
                </svg>
                <div class="name">电话</div>
                <div class="code-name">#icondianhua</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icondianzan"></use>
                </svg>
                <div class="name">点赞</div>
                <div class="code-name">#icondianzan</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icondingwei"></use>
                </svg>
                <div class="name">定位</div>
                <div class="code-name">#icondingwei</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icondiantong_guan"></use>
                </svg>
                <div class="name">电筒_关</div>
                <div class="code-name">#icondiantong_guan</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icondianying"></use>
                </svg>
                <div class="name">电影</div>
                <div class="code-name">#icondianying</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconditu"></use>
                </svg>
                <div class="name">地图</div>
                <div class="code-name">#iconditu</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icondiantong_kai"></use>
                </svg>
                <div class="name">电筒_开</div>
                <div class="code-name">#icondiantong_kai</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icondianyingpiao"></use>
                </svg>
                <div class="name">电影票</div>
                <div class="code-name">#icondianyingpiao</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icondingdan"></use>
                </svg>
                <div class="name">订单</div>
                <div class="code-name">#icondingdan</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icongengduo"></use>
                </svg>
                <div class="name">更多</div>
                <div class="code-name">#icongengduo</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconfanbei"></use>
                </svg>
                <div class="name">翻倍</div>
                <div class="code-name">#iconfanbei</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconfaxian"></use>
                </svg>
                <div class="name">发现</div>
                <div class="code-name">#iconfaxian</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconertongpiao"></use>
                </svg>
                <div class="name">儿童票</div>
                <div class="code-name">#iconertongpiao</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icongongyi"></use>
                </svg>
                <div class="name">公益</div>
                <div class="code-name">#icongongyi</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconhongbao"></use>
                </svg>
                <div class="name">红包</div>
                <div class="code-name">#iconhongbao</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconfuzhi"></use>
                </svg>
                <div class="name">复制</div>
                <div class="code-name">#iconfuzhi</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconfenxiang"></use>
                </svg>
                <div class="name">分享</div>
                <div class="code-name">#iconfenxiang</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconhuatifuhao"></use>
                </svg>
                <div class="name">话题符号</div>
                <div class="code-name">#iconhuatifuhao</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconhuiyuan"></use>
                </svg>
                <div class="name">会员</div>
                <div class="code-name">#iconhuiyuan</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconaliyu"></use>
                </svg>
                <div class="name">阿里鱼</div>
                <div class="code-name">#iconaliyu</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconjiju"></use>
                </svg>
                <div class="name">机具</div>
                <div class="code-name">#iconjiju</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconjianshao"></use>
                </svg>
                <div class="name">减少</div>
                <div class="code-name">#iconjianshao</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconkabao"></use>
                </svg>
                <div class="name">卡包</div>
                <div class="code-name">#iconkabao</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconhuati"></use>
                </svg>
                <div class="name">话题</div>
                <div class="code-name">#iconhuati</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconguanzhu"></use>
                </svg>
                <div class="name">关注</div>
                <div class="code-name">#iconguanzhu</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconmaiyizengyi"></use>
                </svg>
                <div class="name">买一赠一</div>
                <div class="code-name">#iconmaiyizengyi</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconmima"></use>
                </svg>
                <div class="name">密码</div>
                <div class="code-name">#iconmima</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconnan"></use>
                </svg>
                <div class="name">男</div>
                <div class="code-name">#iconnan</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconnv"></use>
                </svg>
                <div class="name">女</div>
                <div class="code-name">#iconnv</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconlihe"></use>
                </svg>
                <div class="name">礼盒</div>
                <div class="code-name">#iconlihe</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconpaihangbang"></use>
                </svg>
                <div class="name">排行榜</div>
                <div class="code-name">#iconpaihangbang</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconlipinka"></use>
                </svg>
                <div class="name">礼品卡</div>
                <div class="code-name">#iconlipinka</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconpengyouquan"></use>
                </svg>
                <div class="name">朋友圈</div>
                <div class="code-name">#iconpengyouquan</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconmingxinghuodong"></use>
                </svg>
                <div class="name">明星活动</div>
                <div class="code-name">#iconmingxinghuodong</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconqupiao"></use>
                </svg>
                <div class="name">取票</div>
                <div class="code-name">#iconqupiao</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconsaoyisao"></use>
                </svg>
                <div class="name">扫一扫</div>
                <div class="code-name">#iconsaoyisao</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconrili"></use>
                </svg>
                <div class="name">日历</div>
                <div class="code-name">#iconrili</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconpinglun"></use>
                </svg>
                <div class="name">评论</div>
                <div class="code-name">#iconpinglun</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconqinghuiyuan"></use>
                </svg>
                <div class="name">轻会员</div>
                <div class="code-name">#iconqinghuiyuan</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconriqian"></use>
                </svg>
                <div class="name">日签</div>
                <div class="code-name">#iconriqian</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconshandian"></use>
                </svg>
                <div class="name">闪电</div>
                <div class="code-name">#iconshandian</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconshaixuan"></use>
                </svg>
                <div class="name">筛选</div>
                <div class="code-name">#iconshaixuan</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconshangquan"></use>
                </svg>
                <div class="name">商圈</div>
                <div class="code-name">#iconshangquan</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconshanchu"></use>
                </svg>
                <div class="name">删除</div>
                <div class="code-name">#iconshanchu</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconshezhi"></use>
                </svg>
                <div class="name">设置</div>
                <div class="code-name">#iconshezhi</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconshangchuan"></use>
                </svg>
                <div class="name">上传</div>
                <div class="code-name">#iconshangchuan</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconshequ"></use>
                </svg>
                <div class="name">社区</div>
                <div class="code-name">#iconshequ</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconshengyinguanbi"></use>
                </svg>
                <div class="name">声音关闭</div>
                <div class="code-name">#iconshengyinguanbi</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconshibai"></use>
                </svg>
                <div class="name">失败</div>
                <div class="code-name">#iconshibai</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconshijian"></use>
                </svg>
                <div class="name">时间</div>
                <div class="code-name">#iconshijian</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconshengyin"></use>
                </svg>
                <div class="name">声音</div>
                <div class="code-name">#iconshengyin</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconshoucang"></use>
                </svg>
                <div class="name">收藏</div>
                <div class="code-name">#iconshoucang</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconshouji"></use>
                </svg>
                <div class="name">手机</div>
                <div class="code-name">#iconshouji</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconshouye"></use>
                </svg>
                <div class="name">首页</div>
                <div class="code-name">#iconshouye</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconshuju"></use>
                </svg>
                <div class="name">数据</div>
                <div class="code-name">#iconshuju</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconshuaxin"></use>
                </svg>
                <div class="name">刷新</div>
                <div class="code-name">#iconshuaxin</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconsousuo"></use>
                </svg>
                <div class="name">搜索</div>
                <div class="code-name">#iconsousuo</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icontanhao"></use>
                </svg>
                <div class="name">叹号</div>
                <div class="code-name">#icontanhao</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icontaolunqu"></use>
                </svg>
                <div class="name">讨论区</div>
                <div class="code-name">#icontaolunqu</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icontianjiayouhuiquan"></use>
                </svg>
                <div class="name">添加优惠券</div>
                <div class="code-name">#icontianjiayouhuiquan</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icontishi"></use>
                </svg>
                <div class="name">提示</div>
                <div class="code-name">#icontishi</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icontupian"></use>
                </svg>
                <div class="name">图片</div>
                <div class="code-name">#icontupian</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icontuipiao"></use>
                </svg>
                <div class="name">退票</div>
                <div class="code-name">#icontuipiao</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconweixuanzhong"></use>
                </svg>
                <div class="name">未选中</div>
                <div class="code-name">#iconweixuanzhong</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconweibo"></use>
                </svg>
                <div class="name">微博</div>
                <div class="code-name">#iconweibo</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconwenjuan"></use>
                </svg>
                <div class="name">问卷</div>
                <div class="code-name">#iconwenjuan</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconwode"></use>
                </svg>
                <div class="name">我的</div>
                <div class="code-name">#iconwode</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconweixin"></use>
                </svg>
                <div class="name">微信</div>
                <div class="code-name">#iconweixin</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconwodeguanzhu"></use>
                </svg>
                <div class="name">我的关注</div>
                <div class="code-name">#iconwodeguanzhu</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconxiami"></use>
                </svg>
                <div class="name">虾米</div>
                <div class="code-name">#iconxiami</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconxiangkan"></use>
                </svg>
                <div class="name">想看</div>
                <div class="code-name">#iconxiangkan</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconxiangji"></use>
                </svg>
                <div class="name">相机</div>
                <div class="code-name">#iconxiangji</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconxiaoxi"></use>
                </svg>
                <div class="name">消息</div>
                <div class="code-name">#iconxiaoxi</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconxiazai"></use>
                </svg>
                <div class="name">下载</div>
                <div class="code-name">#iconxiazai</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconxiaojuchang"></use>
                </svg>
                <div class="name">小聚场</div>
                <div class="code-name">#iconxiaojuchang</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconxiaoshi"></use>
                </svg>
                <div class="name">小食</div>
                <div class="code-name">#iconxiaoshi</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconxiaoxizhongxin"></use>
                </svg>
                <div class="name">消息中心</div>
                <div class="code-name">#iconxiaoxizhongxin</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconyinhangka"></use>
                </svg>
                <div class="name">银行卡</div>
                <div class="code-name">#iconyinhangka</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconyanjing"></use>
                </svg>
                <div class="name">眼睛</div>
                <div class="code-name">#iconyanjing</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconyingchengka"></use>
                </svg>
                <div class="name">影城卡</div>
                <div class="code-name">#iconyingchengka</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconyixiangkan"></use>
                </svg>
                <div class="name">已想看</div>
                <div class="code-name">#iconyixiangkan</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconyingpingmoban"></use>
                </svg>
                <div class="name">影评模板</div>
                <div class="code-name">#iconyingpingmoban</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconyanchu"></use>
                </svg>
                <div class="name">演出</div>
                <div class="code-name">#iconyanchu</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconxiaomi"></use>
                </svg>
                <div class="name">小蜜</div>
                <div class="code-name">#iconxiaomi</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconyingyuan"></use>
                </svg>
                <div class="name">影院</div>
                <div class="code-name">#iconyingyuan</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconzengjia"></use>
                </svg>
                <div class="name">增加</div>
                <div class="code-name">#iconzengjia</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconyuyin"></use>
                </svg>
                <div class="name">语音</div>
                <div class="code-name">#iconyuyin</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconyouhuiquan"></use>
                </svg>
                <div class="name">优惠券</div>
                <div class="code-name">#iconyouhuiquan</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconWIFI"></use>
                </svg>
                <div class="name">WIFI</div>
                <div class="code-name">#iconWIFI</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconzhibo"></use>
                </svg>
                <div class="name">直播</div>
                <div class="code-name">#iconzhibo</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconyoukuhuiyuan"></use>
                </svg>
                <div class="name">优酷会员</div>
                <div class="code-name">#iconyoukuhuiyuan</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconyulebao"></use>
                </svg>
                <div class="name">娱乐宝</div>
                <div class="code-name">#iconyulebao</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconzhiwen"></use>
                </svg>
                <div class="name">指纹</div>
                <div class="code-name">#iconzhiwen</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconaixin1"></use>
                </svg>
                <div class="name">爱心</div>
                <div class="code-name">#iconaixin1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconchenggong1"></use>
                </svg>
                <div class="name">成功</div>
                <div class="code-name">#iconchenggong1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icondianzan1"></use>
                </svg>
                <div class="name">点赞</div>
                <div class="code-name">#icondianzan1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icondianhua1"></use>
                </svg>
                <div class="name">电话</div>
                <div class="code-name">#icondianhua1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconbangzhu1"></use>
                </svg>
                <div class="name">帮助</div>
                <div class="code-name">#iconbangzhu1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icondianyingpiao1"></use>
                </svg>
                <div class="name">电影票</div>
                <div class="code-name">#icondianyingpiao1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconfaxian1"></use>
                </svg>
                <div class="name">发现</div>
                <div class="code-name">#iconfaxian1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icondingwei1"></use>
                </svg>
                <div class="name">定位</div>
                <div class="code-name">#icondingwei1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icongonggao"></use>
                </svg>
                <div class="name">公告</div>
                <div class="code-name">#icongonggao</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconhuati1"></use>
                </svg>
                <div class="name">话题</div>
                <div class="code-name">#iconhuati1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconjianshao1"></use>
                </svg>
                <div class="name">减少</div>
                <div class="code-name">#iconjianshao1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconhuiyuan1"></use>
                </svg>
                <div class="name">会员</div>
                <div class="code-name">#iconhuiyuan1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconpinglun1"></use>
                </svg>
                <div class="name">评论</div>
                <div class="code-name">#iconpinglun1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconshequ1"></use>
                </svg>
                <div class="name">社区</div>
                <div class="code-name">#iconshequ1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconshibai1"></use>
                </svg>
                <div class="name">失败</div>
                <div class="code-name">#iconshibai1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconshijian1"></use>
                </svg>
                <div class="name">时间</div>
                <div class="code-name">#iconshijian1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconshandian1"></use>
                </svg>
                <div class="name">闪电</div>
                <div class="code-name">#iconshandian1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconwode1"></use>
                </svg>
                <div class="name">我的</div>
                <div class="code-name">#iconwode1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconshouye1"></use>
                </svg>
                <div class="name">首页</div>
                <div class="code-name">#iconshouye1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconshouji1"></use>
                </svg>
                <div class="name">手机</div>
                <div class="code-name">#iconshouji1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icontanhao1"></use>
                </svg>
                <div class="name">叹号</div>
                <div class="code-name">#icontanhao1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconshoucang1"></use>
                </svg>
                <div class="name">收藏</div>
                <div class="code-name">#iconshoucang1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconshuju1"></use>
                </svg>
                <div class="name">数据</div>
                <div class="code-name">#iconshuju1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconwenda"></use>
                </svg>
                <div class="name">问答</div>
                <div class="code-name">#iconwenda</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconyanjing1"></use>
                </svg>
                <div class="name">眼睛</div>
                <div class="code-name">#iconyanjing1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconyingchengka1"></use>
                </svg>
                <div class="name">影城卡</div>
                <div class="code-name">#iconyingchengka1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconxiangji1"></use>
                </svg>
                <div class="name">相机</div>
                <div class="code-name">#iconxiangji1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconyingyuan1"></use>
                </svg>
                <div class="name">影院</div>
                <div class="code-name">#iconyingyuan1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconyinhangyouhui"></use>
                </svg>
                <div class="name">银行优惠</div>
                <div class="code-name">#iconyinhangyouhui</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconxiaoshi1"></use>
                </svg>
                <div class="name">小食</div>
                <div class="code-name">#iconxiaoshi1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconyanchu1"></use>
                </svg>
                <div class="name">演出</div>
                <div class="code-name">#iconyanchu1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconzengjia1"></use>
                </svg>
                <div class="name">增加</div>
                <div class="code-name">#iconzengjia1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icondianying1"></use>
                </svg>
                <div class="name">电影</div>
                <div class="code-name">#icondianying1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconyouhuiquan1"></use>
                </svg>
                <div class="name">优惠券</div>
                <div class="code-name">#iconyouhuiquan1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconremen"></use>
                </svg>
                <div class="name">热门</div>
                <div class="code-name">#iconremen</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconchuangzuo1"></use>
                </svg>
                <div class="name">创作</div>
                <div class="code-name">#iconchuangzuo1</div>
            </li>
          
          </ul>
          <div class="article markdown">
          <h2 id="symbol-">Symbol 引用</h2>
          <hr>

          <p>这是一种全新的使用方式，应该说这才是未来的主流，也是平台目前推荐的用法。相关介绍可以参考这篇<a href="">文章</a>
            这种用法其实是做了一个 SVG 的集合，与另外两种相比具有如下特点：</p>
          <ul>
            <li>支持多色图标了，不再受单色限制。</li>
            <li>通过一些技巧，支持像字体那样，通过 <code>font-size</code>, <code>color</code> 来调整样式。</li>
            <li>兼容性较差，支持 IE9+，及现代浏览器。</li>
            <li>浏览器渲染 SVG 的性能一般，还不如 png。</li>
          </ul>
          <p>使用步骤如下：</p>
          <h3 id="-symbol-">第一步：引入项目下面生成的 symbol 代码：</h3>
<pre><code class="language-html">&lt;script src="./iconfont.js"&gt;&lt;/script&gt;
</code></pre>
          <h3 id="-css-">第二步：加入通用 CSS 代码（引入一次就行）：</h3>
<pre><code class="language-html">&lt;style&gt;
.icon {
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}
&lt;/style&gt;
</code></pre>
          <h3 id="-">第三步：挑选相应图标并获取类名，应用于页面：</h3>
<pre><code class="language-html">&lt;svg class="icon" aria-hidden="true"&gt;
  &lt;use xlink:href="#icon-xxx"&gt;&lt;/use&gt;
&lt;/svg&gt;
</code></pre>
          </div>
      </div>

    </div>
  </div>
  <script>
  $(document).ready(function () {
      $('.tab-container .content:first').show()

      $('#tabs li').click(function (e) {
        var tabContent = $('.tab-container .content')
        var index = $(this).index()

        if ($(this).hasClass('active')) {
          return
        } else {
          $('#tabs li').removeClass('active')
          $(this).addClass('active')

          tabContent.hide().eq(index).fadeIn()
        }
      })
    })
  </script>
</body>
</html>
